<template>
  <div class="edit-gallery">
    <div class="edit-gallery__topbar">
      <p class="edit-gallery__topbar--title">新建摄影图库</p>
      <yk-space>
        <yk-button type="secondary" @click="cancel">取消</yk-button>
        <yk-button @click="submit(1)">发布</yk-button>
      </yk-space>
    </div>
    <yk-space style="width: 100%;">
      <editPhoto @editors="editorData" @cover="coverData" :content="defaultArticle?.content"
        :cover="defaultArticle?.cover"></editPhoto>
      <div class="edit-form">
        <formComponent style="width: 420px;" :classify="1" @formData=formData :form="defaultArticle?.formData">
        </formComponent>
      </div>
    </yk-space>
  </div>
</template>

<script setup lang="ts">
import editPhoto from '@/components/gallery/editPhoto.vue';
import formComponent from '@/components/forms/formComponent.vue';
import { useArticle } from '@/hooks/article';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute();
const {
  formData,
  editorData,
  coverData,
  submit,
  id,
  defaultArticle
} = useArticle();


if (route.query.id) {
  id.value = Number(route.query.id);
}

// 取消
const cancel = () => {
  router.go(-1)
}



</script>

<style lang="less" scoped>
.edit-gallery {
  padding: @space-xl 80px;

  &__topbar {
    border-radius: @radius-m;
    background: @bg-color-l;
    padding: @space-l @space-xl;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @space-l;

    &--title {
      .font-xl();
      font-weight: 600;
    }
  }

  .edit-form {
    background: @bg-color-l;
    border-radius: @radius-m;
    // width: 440px;
    // height: 400px;
    flex: none;
    display: flex;
    padding: 24px;
    justify-content: center;
  }
}
</style>
